---
title: Іконки
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Список іконок, які використовуються по всьому додатку.

## Іконки Tabler

Ми використовуємо іконки Tabler для React по всьому додатку.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

Ви можете імпортувати кожну іконку як компонент. Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| Властивості | Тип   | Опис                               | За замовчуванням |
| ----------- | ----- | ---------------------------------- | ---------------- |
| розмір      | число | Висота і ширина іконки в пікселях  | 24               |
| колір       | рядок | Колір іконок                       | currentColor     |
| stroke      | число | Ширина обведення іконки в пікселях | 2                |

</Tab>

</Tabs>

## Користувацькі іконки

Крім іконок Tabler, додаток також використовує деякі користувацькі іконки.

### Іконка адресної книги

Відображає іконку адресної книги.

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| Властивості | Тип   | Опис                               | За замовчуванням |
| ----------- | ----- | ---------------------------------- | ---------------- |
| розмір      | число | Висота і ширина іконки в пікселях  | 24               |
| stroke      | число | Ширина обведення іконки в пікселях | 2                |

</Tab>

</Tabs>
